<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"kelvinzhang.gitee.io","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="前言开发小程序离不开后台数据，对于独立开发者来说，既要写前端，又要写后端，工作量就会骤然增大。微信提供的云开发无疑是给独立开发者提供了很大的便利，但是由于其数据库不支持联表查询，对于某些场景就不是那么的友好了。当然，市面上有很多的BaaS服务提供商，大都类似，今天我们就用其中的一个LeanCloud来讲解一下，如何快速使用LeanCloud来开发一个小程序。由于本次重点在LeanCloud，所以小">
<meta property="og:type" content="article">
<meta property="og:title" content="使用LeanCloud快速开发一款小程序">
<meta property="og:url" content="https://kelvinzhang.gitee.io/2019/01/26/%E4%BD%BF%E7%94%A8LeanCloud%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E6%AC%BE%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.html">
<meta property="og:site_name" content="猿创日记">
<meta property="og:description" content="前言开发小程序离不开后台数据，对于独立开发者来说，既要写前端，又要写后端，工作量就会骤然增大。微信提供的云开发无疑是给独立开发者提供了很大的便利，但是由于其数据库不支持联表查询，对于某些场景就不是那么的友好了。当然，市面上有很多的BaaS服务提供商，大都类似，今天我们就用其中的一个LeanCloud来讲解一下，如何快速使用LeanCloud来开发一个小程序。由于本次重点在LeanCloud，所以小">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20181224211110711.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20181224215910353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pxMjgyNTAyNTMy,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20181224221759234.png">
<meta property="article:published_time" content="2019-01-26T06:03:04.000Z">
<meta property="article:modified_time" content="2021-08-26T11:56:30.568Z">
<meta property="article:author" content="Kelvin">
<meta property="article:tag" content="小程序">
<meta property="article:tag" content="LeanCloud">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/20181224211110711.png">

<link rel="canonical" href="https://kelvinzhang.gitee.io/2019/01/26/%E4%BD%BF%E7%94%A8LeanCloud%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E6%AC%BE%E5%B0%8F%E7%A8%8B%E5%BA%8F/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>使用LeanCloud快速开发一款小程序 | 猿创日记</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">猿创日记</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/KelvinQQ" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://kelvinzhang.gitee.io/2019/01/26/%E4%BD%BF%E7%94%A8LeanCloud%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E6%AC%BE%E5%B0%8F%E7%A8%8B%E5%BA%8F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Kelvin">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="猿创日记">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          使用LeanCloud快速开发一款小程序
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-01-26 14:03:04" itemprop="dateCreated datePublished" datetime="2019-01-26T14:03:04+08:00">2019-01-26</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-08-26 19:56:30" itemprop="dateModified" datetime="2021-08-26T19:56:30+08:00">2021-08-26</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" itemprop="url" rel="index"><span itemprop="name">小程序</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>开发小程序离不开后台数据，对于独立开发者来说，既要写前端，又要写后端，工作量就会骤然增大。微信提供的云开发无疑是给独立开发者提供了很大的便利，但是由于其数据库不支持联表查询，对于某些场景就不是那么的友好了。当然，市面上有很多的<code>BaaS</code>服务提供商，大都类似，今天我们就用其中的一个<code>LeanCloud</code>来讲解一下，如何快速使用<code>LeanCloud</code>来开发一个小程序。<br>由于本次重点在<code>LeanCloud</code>，所以小程序的开发内容就不是重点。</p>
<span id="more"></span>

<h1 id="现在开始"><a href="#现在开始" class="headerlink" title="现在开始"></a>现在开始</h1><ol>
<li>先去<a target="_blank" rel="noopener" href="https://leancloud.cn/">https://leancloud.cn</a>官网注册一个账号，然后登录去控制台创建一个新应用。</li>
<li>在微信小程序后台中配置域名白名单，具体需要按照<a target="_blank" rel="noopener" href="https://leancloud.cn/docs/weapp-domains.html">这里</a>说明的来配置，你也可以先跳过这一步，等完全开发完毕后再来配置。可在开发者工具的 <strong>详情</strong> &gt; <strong>项目设置</strong> 中勾选<strong>不校验安全域名、TLS 版本以及 HTTPS 证书</strong>。</li>
<li>下载你熟悉的SDK，目前支持<code>JS</code>，<code>WePY</code>，<code>mpvue</code>，下载链接在<a target="_blank" rel="noopener" href="https://leancloud.cn/docs/sdk_setup-js.html#hash649053555">这里</a>，后面以<code>JS</code>来说明，其他方式的<code>SDK</code>导入以及使用方法参考文档中的说明。</li>
<li>初始化<code>SDK</code>，在<code>app.js</code>中加入以下代码即可。<code>appId</code>和<code>appKey</code>可以在控制台中的应用找到。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const AV = require(&#x27;./utils/av-live-query-weapp-min&#x27;);</span><br><span class="line"></span><br><span class="line">AV.init(&#123;</span><br><span class="line">  appId: &#x27;换成你自己的appId&#x27;,</span><br><span class="line">  appKey: &#x27;换成你自己的appKey&#x27;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li>查询数据<br>先需要在控制台中的应用下新建一个表，在网页中叫做<code>Class</code>。每一张表会默认创建<code>objectId</code>、<code>createdAt</code>、<code>updatedAt</code>、<code>ACL</code>四个字段，分别表示<code>数据索引</code>，<code>创建时间</code>，<code>更新时间</code>、<code>权限</code>。你可以添加你想要的字段，目前支持以下几种类型。<br><img src="https://img-blog.csdnimg.cn/20181224211110711.png" alt="支持类型"></li>
</ol>
<p>其中<code>Object</code>是<code>map</code>对象，<code>GeoPoint</code>是经纬度信息，<code>Pointer</code>是另外一张表的表名，做多表联合查询使用的。<br>假设我们的表名是<code>T_TODO</code>，我们可以用以下代码来查询该表下面的数据。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">new AV.Query(&#x27;T_TODO&#x27;)</span><br><span class="line">      .descending(&#x27;createdAt&#x27;) // 排序</span><br><span class="line">      .limit(10) // 分页数量</span><br><span class="line">      .skip(10) // 跳过数量</span><br><span class="line">      .find()</span><br><span class="line">      .then(function(results) &#123;</span><br><span class="line">      		that.setData(&#123;todo: results&#125;)</span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(console.error);</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>  在你的<code>WXML</code>中可以这样写来做数据绑定：<br>  <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">  &lt;!-- pages/todos/todos.wxml --&gt;</span><br><span class="line">&lt;block wx:for=&quot;&#123;&#123;todos&#125;&#125;&quot; wx:for-item=&quot;todo&quot; wx:key=&quot;objectId&quot;&gt;</span><br><span class="line">  &lt;text data-id=&quot;&#123;&#123;todo.objectId&#125;&#125;&quot;&gt;</span><br><span class="line">    &#123;&#123;todo.content&#125;&#125;</span><br><span class="line">  &lt;/text&gt;</span><br><span class="line">&lt;/block&gt;</span><br></pre></td></tr></table></figure><br>是不是很方便。</p>
<ol start="6">
<li>多表查询<br>如果需要多多表查询，先要在一张表中新建一个<code>Pointer</code>字段，新建时会让你选择指向的表名，如下图所示：<br><img src="https://img-blog.csdnimg.cn/20181224215910353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pxMjgyNTAyNTMy,size_16,color_FFFFFF,t_70" alt="演示"><br>然后在查询是使用<code>include</code>，就会返回关联表中的所有信息了，如下所示：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">new AV.Query(&#x27;T_TODO&#x27;)</span><br><span class="line">      .descending(&#x27;createdAt&#x27;) // 排序</span><br><span class="line">      .limit(10) // 分页数量</span><br><span class="line">      .skip(10) // 跳过数量</span><br><span class="line">      .include(&#x27;T_POINT_CLASS&#x27;)</span><br><span class="line">      .find()</span><br><span class="line">      .then(function(results) &#123;</span><br><span class="line">      		that.setData(&#123;todo: results&#125;)</span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(console.error);</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
<li>更新对象<br>小程序中对表中字段做操作后，需要同步更新到服务端，可以使用以下代码来保存对象。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">// 第一个参数是 className，第二个参数是 objectId</span><br><span class="line">var todo = AV.Object.createWithoutData(&#x27;Todo&#x27;, &#x27;5745557f71cfe40068c6abe0&#x27;);</span><br><span class="line">// 修改属性</span><br><span class="line">todo.set(&#x27;content&#x27;, &#x27;每周工程师会议，本周改为周三下午3点半。&#x27;);</span><br><span class="line">// 保存到云端</span><br><span class="line">todo.save();</span><br></pre></td></tr></table></figure></li>
<li>其他更多的操作请查看文档，不过你找不到小程序对应的详细开发文档，只能找到<a target="_blank" rel="noopener" href="https://leancloud.cn/docs/leanstorage_guide-js.html#hash810954180">数据存储开发指南 · JavaScript</a></li>
</ol>
<h1 id="广告时间"><a href="#广告时间" class="headerlink" title="广告时间"></a>广告时间</h1><p><code>三国图鉴</code>是我业余时间开发的查询三国杀武将技能以及官方活动的小程序，后台服务就是由<code>LeanCloud</code>提供的，请大家多多关照。如果有其他问题，你可以关注我的公众号来联系我。</p>
<ul>
<li>扫码体验小程序<br><img src="https://img-blog.csdnimg.cn/20181224221759234.png" alt="三国图鉴"></li>
</ul>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag"># 小程序</a>
              <a href="/tags/LeanCloud/" rel="tag"># LeanCloud</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/01/26/%E5%9C%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E9%9B%86%E6%88%90%E8%B5%9E%E8%B5%8F/" rel="prev" title="在小程序中集成赞赏">
      <i class="fa fa-chevron-left"></i> 在小程序中集成赞赏
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/01/30/%E4%B8%A4%E4%B8%AABug%E5%BC%95%E5%8F%91%E7%9A%84%E9%98%B4%E8%B0%8B%E8%AE%BA/" rel="next" title="两个Bug引发的阴谋论">
      两个Bug引发的阴谋论 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%8E%B0%E5%9C%A8%E5%BC%80%E5%A7%8B"><span class="nav-number">2.</span> <span class="nav-text">现在开始</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B9%BF%E5%91%8A%E6%97%B6%E9%97%B4"><span class="nav-number">3.</span> <span class="nav-text">广告时间</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Kelvin</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">57</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">56</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/KelvinQQ" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;KelvinQQ" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:history_zq@163.com" title="E-Mail → mailto:history_zq@163.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Kelvin</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"live2d-widget-models\\packages\\live2d-widget-model-miku"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
